<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态烟花</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }

        canvas {
            display: block;
        }

       .text-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: Arial, sans-serif;
            font-size: 80px;
            font-weight: bold;
            text-align: center;
            z-index: 1;
            color: white;
            text-shadow: 
                0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #ff00de,
                0 0 70px #ff00de,
                0 0 80px #ff00de,
                0 0 100px #ff00de,
                0 0 150px #ff00de;
            animation: pulsate 1.5s infinite alternate;
            cursor: pointer;
        }

        @keyframes pulsate {
            100% {
                text-shadow: 
                    0 0 4px #fff,
                    0 0 11px #fff,
                    0 0 19px #fff,
                    0 0 40px #ff00de,
                    0 0 80px #ff00de,
                    0 0 90px #ff00de,
                    0 0 100px #ff00de,
                    0 0 150px #ff00de;
            }
            0% {
                text-shadow: 
                    0 0 2px #fff,
                    0 0 4px #fff,
                    0 0 6px #fff,
                    0 0 10px #ff00de,
                    0 0 45px #ff00de,
                    0 0 55px #ff00de,
                    0 0 70px #ff00de,
                    0 0 80px #ff00de;
            }
        }

       .word-cloud {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            width: 600px; 
            height: 600px; 
        }

       .word-cloud span {
            position: absolute;
            font-size: 20px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="text-container" id="greeting-text">五一快乐！</div>
    <div class="word-cloud" id="word-cloud"></div>
    <canvas id="fireworks"></canvas>
    <script>
        const canvas = document.getElementById('fireworks');
        const ctx = canvas.getContext('2d');

        // 设置画布大小
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // 烟花类
        class Firework {
            constructor(x, y, targetX, targetY, color) {
                this.x = x;
                this.y = y;
                this.targetX = targetX;
                this.targetY = targetY;
                this.color = color;
                this.speed = Math.random() * 6 + 4;
                this.distanceToTarget = Math.sqrt((targetX - x) ** 2 + (targetY - y) ** 2);
                this.distanceTraveled = 0;
                this.exploded = false;
                this.particles = [];
            }

            update() {
                if (!this.exploded) {
                    const dx = this.targetX - this.x;
                    const dy = this.targetY - this.y;
                    const angle = Math.atan2(dy, dx);
                    this.x += Math.cos(angle) * this.speed;
                    this.y += Math.sin(angle) * this.speed;
                    this.distanceTraveled += this.speed;

                    if (this.distanceTraveled >= this.distanceToTarget) {
                        this.explode();
                    }
                } else {
                    this.particles.forEach(particle => particle.update());
                    this.particles = this.particles.filter(particle =>!particle.dead);
                }
            }

            explode() {
                this.exploded = true;
                const numParticles = Math.floor(Math.random() * 300) + 200; // 增加粒子数量
                for (let i = 0; i < numParticles; i++) {
                    const angle = Math.random() * Math.PI * 2;
                    const speed = Math.random() * 7 + 3; // 增加速度范围
                    const depth = (Math.random() - 0.5) * 20;
                    const randomGravity = Math.random() * 0.02 + 0.01;
                    this.particles.push(new Particle(this.x, this.y, this.color, angle, speed, depth, randomGravity));
                }
            }

            draw() {
                if (!this.exploded) {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                } else {
                    this.particles.forEach(particle => particle.draw());
                }
            }
        }

        // 粒子类
        class Particle {
            constructor(x, y, color, angle, speed, depth, gravity) {
                this.x = x;
                this.y = y;
                this.color = color;
                this.size = Math.random() * 3 + 1;
                this.speedX = Math.cos(angle) * speed;
                this.speedY = Math.sin(angle) * speed;
                this.depth = depth;
                this.alpha = 1;
                this.dead = false;
                this.gravity = gravity;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                this.speedY += this.gravity;
                this.alpha -= 0.005; // 降低透明度衰减速度，让消散时间更长
                if (this.alpha <= 0) {
                    this.dead = true;
                }
            }

            draw() {
                const perspective = 1 / (1 + this.depth / 100);
                const scaledSize = this.size * perspective;
                const drawX = this.x + this.depth;
                const drawY = this.y + this.depth;

                ctx.globalAlpha = this.alpha;
                ctx.beginPath();
                ctx.arc(drawX, drawY, scaledSize, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.globalAlpha = 1;
            }
        }

        const fireworks = [];

        function createFirework(targetX, targetY) {
            const x = Math.random() * canvas.width;
            const y = canvas.height;
            const colors = ['#FF5733', '#33FF57', '#5733FF', '#FF33E4', '#33FFF6', '#FFFF33', '#FF9933'];
            const color = colors[Math.floor(Math.random() * colors.length)];
            fireworks.push(new Firework(x, y, targetX, targetY, color));
        }

        // 定时生成烟花
        setInterval(() => {
            const targetX = Math.random() * canvas.width;
            const targetY = Math.random() * canvas.height * 0.7;
            createFirework(targetX, targetY);
        }, Math.random() * 1000 + 200);

        // 点击增加烟花
        canvas.addEventListener('click', (event) => {
            const rect = canvas.getBoundingClientRect();
            const targetX = event.clientX - rect.left;
            const targetY = event.clientY - rect.top;
            createFirework(targetX, targetY);
        });

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            fireworks.forEach((firework, index) => {
                firework.update();
                firework.draw();
                if (firework.exploded && firework.particles.length === 0) {
                    fireworks.splice(index, 1);
                }
            });
            requestAnimationFrame(animate);
        }
        animate();

        // 为文本添加点击事件
        const greetingText = document.getElementById('greeting-text');
        const colors = ['#FF5733', '#33FF57', '#5733FF', '#FF33E4', '#33FFF6', '#FFFF33', '#FF9933'];
        greetingText.addEventListener('click', function() {
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            this.style.color = randomColor;
            const shadowColor = randomColor.replace('#', '');
            this.style.textShadow = `
                0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #${shadowColor},
                0 0 70px #${shadowColor},
                0 0 80px #${shadowColor},
                0 0 100px #${shadowColor},
                0 0 150px #${shadowColor}
            `;
        });

        // 生成词云
        const wordCloud = document.getElementById('word-cloud');
        const words = [
            "又耳",
            "胡椒盐xxxx",
            "南山下",
            "梨",
            "三寻",
            "Luminescen",
            "Azurequinox",
            "啥都嗑",
            "章鱼哥",
            "晴",
            "阿白",
            "Sarah",
            "Cheryl",
            "不敲",
            "咕咕咕咕咕",
            "Zzz",
            "Ja",
            "Water",
            "Jetivy",
            "Adventure"
        ];
        const wordCloudSize = 300; 
        const occupiedPositions = [];
        const minDistance = 50; 

        const textRect = greetingText.getBoundingClientRect();
        const textX = textRect.left + textRect.width / 2;
        const textY = textRect.top + textRect.height / 2;

        words.forEach(word => {
            let validPosition = false;
            let x, y;
            while (!validPosition) {
                const angle = Math.random() * 2 * Math.PI;
                const distance = Math.random() * wordCloudSize + 100; 
                x = Math.cos(angle) * distance;
                y = Math.sin(angle) * distance;
                validPosition = true;
                for (let i = 0; i < occupiedPositions.length; i++) {
                    const [px, py] = occupiedPositions[i];
                    const dist = Math.sqrt((x - px) ** 2 + (y - py) ** 2);
                    if (dist < minDistance) {
                        validPosition = false;
                        break;
                    }
                }
                // 检查与文本的距离
                const distToText = Math.sqrt((x - textX) ** 2 + (y - textY) ** 2);
                if (distToText < 200) { // 可调整距离阈值
                    validPosition = false;
                }
            }
            occupiedPositions.push([x, y]);

            const span = document.createElement('span');
            span.textContent = word;
            span.style.left = `calc(50% + ${x}px)`;
            span.style.top = `calc(50% + ${y}px)`;
            wordCloud.appendChild(span);

            // 不规律闪烁效果，减慢闪烁速度
            const blinkInterval = Math.random() * 3000 + 1500; 
            setInterval(() => {
                span.style.opacity = span.style.opacity === '0'? '1' : '0';
            }, blinkInterval);
        });
    </script>
</body>

</html>
    